<!DOCTYPE html>
<html>
<head>
   <!--    <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> -->
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="/public/css/element-ui/index.css">
    <link rel="stylesheet" href="/public/css/icon/iconfont.css">

    <!-- import Vue before Element -->
    <script src="/public/js/vue.js"></script>
    <!-- 引入 http-vue-loader -->
    <script src="/public/js/http-vue-loader"></script>
    <title>报表分析</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }

    .rili-time {
        font-size: 24px;
        color: red;
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 5px;
    }

    .el-carousel__container {
        height: 340px;
    }

    .el-aside .el-carousel {
        margin: 5px;
        border: 2px solid #ccc;
        border-radius: 9px;
    }

    .rili {
        margin: 5px;
        border: 2px solid #ccc;
        border-radius: 9px;
        margin-top: 0px;
        border-top: none;
        padding: 20px 0 0 0;
    }
    

    .rili-block {
        border: 1px solid #ccc;
        /*padding: 20px;*/
    }

    .rili-date {
        display: block;
        width: 100%;
        font-size: 18px;
        border-bottom: 1px solid #ccc;
        text-align: center;
        padding: 10px 0;
    }

    .rili-day {
        font-size: 35px;
        color: blue;
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 5px;
    }

    .rili-xingqi, .rili-nongli {
        display: block;
        width: 100%;
        text-align: center;
    }

    .rili-xingqi {
        font-size: 12px;
        line-height: 20px;
    }

    .rili-nongli {
        font-size: 12px;
        color: red;
        line-height: 20px;
    }

    .rili-buttom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        align-content: center;
    }

    .rili-buttom .item {
        flex-grow: 0;
        margin-top: 10px;
    }

    .rili .el-badge__content.is-fixed {
        right: 0px;
    }

    .content-main {
        background-color: #f5f5f5;
        border: 1px solid #99bce8;
        margin-top: 5px;
    }

    .msg-content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .msg-content .block {
        width: 30%;
        height: 125px;
        border-radius: 8px;
        margin: 10px;
        background-color: #fff;

    }

    .msg-content .panel-inner {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .msg-content .panel-inner .avatar .el-avatar {
        background-color: #fff;
        color: #47a87f;
        border: 1px solid #47a87f;
        font-size: 36px;
    }

    .msg-content .panel-inner .avatar {
        margin-top: 20px;
        margin-left: 40px;
    }

    .msg-content .panel-inner .title, .msg-content .panel-inner .msg-counts {
        display: flex;
        flex-direction: column;
        margin: 20px;
    }

    .msg-content .panel-inner .title .msg-title {
        font-size: 20px;
    }

    .msg-content .panel-inner .title .msg-total {
        font-size: 12px;
        margin-top: 20px;
    }

    .msg-content .panel-inner .msg-counts .item {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .msg-content .panel-inner .msg-counts .item span:last-child {
        font-size: 16px;
        color: red;
    }

    .demo-basic--circle, .button-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .button-list {
        margin: 5px;
        margin-bottom: 0px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        /*border: 2px solid #ccc;*/
        /*border-radius: 9px;*/
    }

    .button-list .block {
        flex: 1;
        display: flex;
        flex-direction: column;
        /*flex-grow: 1;*/
        margin-top: 10px;
    }

    .button-list .block .el-button{
        padding: 12px 5px !important;
    }


    .demo-basic--circle .block {
        flex: 1;
        display: flex;
        flex-direction: column;
        /*flex-grow: 1;*/
        margin-top: 15px;
        cursor: pointer;
        color: #8492a6;
    }

    .demo-basic--circle .block:hover {
        background-color: #e95352;
        color: #fff;
        border-radius: 8px;
    }

    .demo-basic--circle .block .title {
        margin-top: 10px;
        font-size: 14px;

        text-align: center;
    }

    .demo-basic--circle .el-avatar {
        display: inline-block;
        box-sizing: border-box;
        text-align: center;
        overflow: hidden;
        color: #fff;
        background: #f5f5f5;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #f5f5f5;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #f5f5f5;
    }

    .el-header {
        height: 40px !important;
        background-color: #b81f1f;
        color: #fff;
    }

    .el-footer {
        background-color: #000;
        color: #A4A4A4;
        /*text-align: center;*/
        /*line-height: 60px;*/
    }

    .el-aside {
        background-color: #fff;
        color: #333;
        /*text-align: center;*/
        /*line-height: 200px;*/
    }

    .el-main {
        /*background-color: #E9EEF3;*/
        /*color: #333;*/
        padding: 0px;
        padding-top: 5px;
        /*text-align: center;*/
        /*line-height: 160px;*/
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        /*line-height: 260px;*/
    }

    .el-container:nth-child(7) .el-aside {
        /*line-height: 320px;*/
    }


    .el-row {
        margin-bottom: 20px;
    }

    .el-row:last-child {
        margin-bottom: 0;
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #d8d8d8;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
        /*margin-top: 5px;*/
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .block .el-avatar>img{
        height: auto !important;
        margin: 22px auto;
        width: 36px;
    }
</style>
</head>
<body>


<div id="app">
    <el-container>
        <el-header>
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="grid-content">
                        <a href="/" target="_self"><el-image
                                style="width: 200px; height: 38px"
                                src="./statics/images/logo.png"
                                fit="contain"></el-image></a>
                    </div>
                </el-col>
                <el-col :span="14">
                    <div class="grid-content " style="line-height: 40px;">

                        <el-row>
                            <el-col :span="2">
                                <div class="grid-content" style="text-align: center">
                                    <el-image style="width: 40px; height: 40px"
                                              src="./statics/images/head.png"></el-image>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="grid-content">
                                    <span>上午好！吴先生</span>
                                    <i class="el-icon-check"></i>
                                </div>
                            </el-col>
                            <!--                            <el-col :span="18">-->
<!--                                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" suffix-icon="el-icon-camera">-->
<!--                                    <el-select v-model="select" slot="prepend" placeholder="请选择">-->
<!--                                        <el-option label="款式" value="1"></el-option>-->
<!--                                        <el-option label="订单号" value="2"></el-option>-->
<!--                                        <el-option label="用户电话" value="3"></el-option>-->
<!--                                    </el-select>-->
<!--                                    <el-button slot="append" icon="el-icon-search"></el-button>-->
<!--                                </el-input>-->
<!--                            </el-col>-->
                        </el-row>


                    </div>
                </el-col>
                <el-col :span="7">
                    <div class="grid-content" style="height: 40px;line-height: 40px;text-align: right">
                        <quanxian-text></quanxian-text>
                        <i class="el-icon-refresh-right" style="font-size: 20px"></i>
                        <i class="el-icon-full-screen" style="font-size: 20px;margin-left: 10px;"></i>
                        <i class="el-icon-close" style="font-size: 20px;margin-left: 10px;"></i>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="220px">

                <menus></menus>

                <div class="button-list">
                    <div class="block">
                        <el-button @click="open">网络查询</el-button>
                    </div>
                  <div class="block">
                        <el-button  >企业微信</el-button>
                    </div>
                    <div class="block">
                        <el-button @click="open2" class="el-icon-search">搜索</el-button>
                    </div>
                </div>

                <div class="rili">
                    <img style="width: 100%" src="./statics/images/rili.png" alt="">
                    <div class="rili-buttom">
                        <el-button class="item" size="mini">审批</el-button>
                        <el-button class="item" size="mini">公告</el-button>
                        <el-button class="item" size="mini">
                            <el-badge :value="0" :max="99">
                                邮件
                            </el-badge>
                        </el-button>

                    </div>
                    <div class="rili-buttom" style="padding-bottom: 20px">
                         <el-button class="item" size="mini">日程</el-button>
                        <el-button class="item" size="mini">秘书</el-button>
                        <el-button class="item" size="mini">电话</el-button>

                    </div>
                </div>

            </el-aside>
            <el-container :style="{height: mainHeight}">
                <el-main :style="{height: mainHeight}">
                    <div class="content-main">
                        <el-tabs type="border-card">
                            <el-tab-pane label="成品档案">
                                产品类别	产品款号	名称	产品出货日期	产品生产单号	产品出货编码	出货金价	成色	颜色	货重	房租成本	连耗净金重	折足净金重	客供主石	公司提供	主石名称	主石颜色	主石形状	主石编号	主石证书号	主石级别	主石切工	主石数量	主石单价	主石金额	副石名称	副石颜色	副石形状	副石编号	副石证书号	副石级别	副石切工	副石数量	副石单价	副石金额	成本单价	出厂单价	销售单价	录入人	时间	备注

                            </el-tab-pane>
                            <el-tab-pane label="配件档案">
                                配件名称	配件编码	成色	颜色	型号	规格	尺寸	配件单位	数量	成色	房租成本	单价	适用产品类别	对应款式产品	供应商名称	供应商电话	供应商微信号	录入人	时间	备注

                            </el-tab-pane>
                            <el-tab-pane label="耗材档案">
                                材料名称	材料编码	成色	颜色	型号	规格	尺寸	配件单位	数量	成色	房租成本	用途	单价	供应商名称	供应商电话	供应商微信号	录入人	时间	备注

                            </el-tab-pane>
                            <el-tab-pane label="宝石档案管理">
                                宝石名称	宝石编码	颜色	形状	证书号	鉴定单位	级别	切工	产地	克拉重	房租成本	备注

                            </el-tab-pane>
                            <el-tab-pane label="工具档案管理">
                                工具名称	工具编码	型号	规格	尺寸	用途	单价	供应商	供应商电话	供应商网址	供应商地址	备注

                            </el-tab-pane>
                            <el-tab-pane label="设备档案管理">
                                设备名称	设备编码	型号	规格	尺寸	功率	用途	出厂日期	单价	供应商	供应商电话	供应商网址	供应商地址	备注

                            </el-tab-pane>
                            <el-tab-pane label="版模管理">
      产品类别	产品名称	款号	版类别	版数量	入库时间	质量状态	存放区域	管理人	模	房租成本	入库时间	质量状况	存放区域	管理人	备注


                            </el-tab-pane>
                                                        <el-tab-pane label="设计管理">
      
产品类别	产品名称	设计类别	款号	成色	颜色	起版方法	设计货重	设计净金重	设计连耗净金重	房租成本	主石名称	主石颜色	主石形状	主石型号	主石规格	主石尺寸	主石数量	主石重量	主石价值	副石名称	副石颜色	副石形状	副石型号	副石规格	副石尺寸	副石数量	副石重量	配件名称	配件颜色	配件成色	配件型号	配件规格	配件尺寸	配件数量	配件重量	效果图片	3D切图	电汇图位置	备注

                            </el-tab-pane>
                                                        <el-tab-pane label="工艺管理">
      
工序名称	工序代码	所需工具												质量标准																																					
		剪钳	锉刀	砂纸	钻针	锯子	手术刀	防火泥	放大镜	房租成本	铁托	砂轮	其他	无砂洞	无划伤	崩边	麻点	表面不平滑	颜色错误	色差	表面处理处理方法错误	焊接牢固	无漏焊	虚焊	焊斜	焊接错位	活动位不灵活	活动位手感不佳	佩戴结构错误	形态不生动	石货搭配不足	克重偏差大	石头破损	石头松动	石头歪斜	镶法错误	漏打砂	漏抛光	电金水纹线	砂面不均匀	字印位置错误	字印字体错误	字印歪斜	字印内容错误	字印不完整	字印不清晰	其他	内部返工率目标	人均效率目标	品质合格率目标	备注

                            </el-tab-pane>
                                                        <el-tab-pane label="品质管理">
      

                            </el-tab-pane>
                             <el-tab-pane label="计件管理">
      

                            </el-tab-pane>
                            
                        </el-tabs>
                    </div>
                </el-main>

            </el-container>
        </el-container>
        <el-footer style="height: 18px;">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content" style="text-align: center;font-size: 12px;min-height: 18px;">
                        Copyright ©2013 柏毓MOM系统   All rights reserved
                    </div>
                </el-col>
            </el-row>
        </el-footer>
    </el-container>

</div>


</body>


<!-- import JavaScript -->
<script src="/public/js/index.js"></script>
<script>
  Vue.use(httpVueLoader)

  new Vue({
    el: '#app',
    data: function () {
      return {
        visible: false,
        value: new Date(),
        mainHeight: '790px',
        input1: '',
        input2: '',
        input3: '',
        select: ''
      }
    },
    components: {
      // 将组建加入组建库
      'purchase-reports': 'url:./component/purchase-reports.vue',
      'production-reports': 'url:./component/production-reports.vue',
      'store-reports': 'url:./component/store-reports.vue',
      'pm-reports': 'url:./component/pm-reports.vue',
      'financial-reports': 'url:./component/financial-reports.vue',
      'sale-reports': 'url:./component/sale-reports.vue',
      'menus': 'url:./component/menus.vue',
      'quanxian-text': 'url:./component/quanxian-text.vue',
    },
    methods: {
      open () {
        this.$prompt('请输入搜索内容', '百度搜索', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          // inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '搜索内容是: ' + value
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },
      open2 () {
        this.$prompt('请输入搜索内容', '全局搜索', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          // inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '搜索内容是: ' + value
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },
      goto (link) {
        console.log(link)
        window.location.href = './' + link + '.html'
      }
    },
    created () {
      var height = document.documentElement.clientHeight
      var newHeight = height - 40 - 20
      this.mainHeight = newHeight + 'px'
      return 1
    }
  })
</script>
</html>
